// pages/nav-tabs-scroll/index.js
var myBehavior = require('../../behavior/my-behavior')
Page({
  behaviors: [myBehavior],
  /**
   * 页面的初始数据
   */
  data:{
    toView: '',
    activeIndex: 0,
    title: [
      { itemTitle: "商品", opt: 'product', type: 0 }, 
      { itemTitle: "门店", opt: 'store', type: 1 }, 
      { itemTitle: "商品详情", opt: 'info', type: 2 },
      { itemTitle: "详情1", opt: 'info1', type: 3 },
      { itemTitle: "详情2", opt: 'info2', type: 4 },
      { itemTitle: "详情3", opt: 'info3', type: 5 },
      { itemTitle: "详情4", opt: 'info4', type: 6 },
    ],
    isHidden: false,
    scrollLock:false,//滑动枷锁
    isScroll:'',

    heightArray: [],
    topArray: [],
    couponDetail: {
      content: '<div>Hello World!</div>'
    }
  },
 

 
  //富文本解析渲染完成  
  mpHtmlReady(e){
    this.slideAnchor();
  },
 
  //获取锚点的节点信息
  slideAnchor(e){
    new Promise(resolve => {
      let query = wx.createSelectorQuery();
      this.data.title.forEach(item => {
        query.select('#' + item.opt).boundingClientRect();
      })
      query.exec(function (res) {
        resolve(res);
      });
    }).then(res => {
      const windowHeight = wx.getSystemInfoSync().windowHeight;
      let heightArray= [],topArray= [];
      res.forEach(rect=> {
          heightArray.push(Math.floor(rect.top)); 
          topArray.push(rect.height)});
      this.setData({
        scrollHeight:this.data.mainHeight ,
        heightArray,
        topArray,
        scrollLock:true, 
        isScroll:true, //在富文本未解析之前，先禁止界面滑动
      });
    });
  },
 
  //点击锚点跳转
  jumpTo: function (e) {
    console.log(e);
    let target = this.data.title[e.detail.index].opt;
    let activeIndex = this.data.title[e.detail.index].type;
    let  {topArray,mainHeight:scrollHeight,isHidden} = this.data;
    let numHeight =0;
    //计算当前锚点是否能根据tab的点击至顶部
    for(var i =activeIndex; i<topArray.length;i++){
      numHeight +=  topArray[i]
    }
    isHidden =  target=='product'?false:isHidden;
    this.setData({
      toView: target,
      activeIndex,
      isHidden,
      scrollLock:numHeight>=scrollHeight?true:false //如果界面出现锚点位置过低的情况防止tab的active回弹
    })
  },
 
  //scroll-view滚动监听事件
  toScroll: function (e) {
    console.log(e);
    const { heightArray,scrollLock,toView} = this.data;
    let scrollTop = e.detail.scrollTop;
    // let isHidden = scrollTop > 20 ? true : false; //控制tab显示与隐藏
    // if (this.data.isHidden != isHidden) {this.setData({ isHidden, toView: '', activeIndex:0, })}
    //锚点高度足够时，姐买你滑动到相应的位置，tab的active发生相应的改变
    if(scrollLock){
        let len = heightArray.length;
        let lastIndex = len - 1;
        let activeIndex = 0;
        for (let i = 0; i < len; i++) {
          if (scrollTop >= 0 && scrollTop < heightArray[0]) {
            activeIndex = 0;
          } else if (scrollTop >= heightArray[i] && scrollTop < heightArray[i + 1]) {
            activeIndex = i;
          }else if(scrollTop>=heightArray[lastIndex]){
            activeIndex=lastIndex;
          } 
        }
        this.setData({ activeIndex })
    }
  },
 
  //停止滚动，防止锚点位置过低，界面滚动时无效的情况
  endScroll(e){
    this.setData({
      scrollLock:true
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getRect(['.navigateBox'])
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})